` / 具名插槽 |\n\n---\n\n## 七、状态管理\n\n| 对比 | React 生态 | Vue 生态 |\n|------|-----------|----------|\n| 主流 | Redux / Zustand / Jotai | Pinia（官方） |\n| 特点 | 需中间件处理异步 | 原生支持 action 异步 |\n| 代码量 | 较多（样板代码） | 较少 |\n| DevTools | Redux DevTools | Vue DevTools |\n\n---\n\n## 八、生命周期对比\n\n| React（class） | React（hooks） | Vue（Options） |\n|---------------|----------------|----------------|\n| componentDidMount | useEffect(fn, []) | mounted |\n| componentDidUpdate | useEffect(fn, [deps]) | updated |\n| componentWillUnmount | useEffect(() => fn, []) | beforeUnmount |\n| shouldComponentUpdate | React.memo | computed（自动） |\n\n---\n\n## 九、性能对比\n\n| 维度 | React | Vue |\n|------|-------|-----|\n| 更新粒度 | 组件级 | 组件级 + 精确到变量 |\n| 优化手段 | useMemo/useCallback/memo | 自动追踪，较少手写优化 |\n| 虚拟 DOM | 全量 diff | 编译时优化（静态提升、补丁标记） |\n| 首屏体积 | ~40KB（react + react-dom） | ~16KB（runtime-only） |\n\n---\n\n## 十、生态\n\n| 领域 | React | Vue |\n|------|-------|-----|\n| SSR/SSG | Next.js | Nuxt |\n| 移动端 | React Native | uni-app / taro |\n| 桌面端 | Electron + React | Electron + Vue |\n| 组件库 | Ant Design、MUI | Element Plus、Ant Design Vue |\n| 类型支持 | TS 原生友好 | Vue 3 + TS 较好 |\n\n---\n\n## 十一、高频面试题\n\n### Q1：React 和 Vue 最大的区别？\n> React 是**不可变数据 + 手动 setState**，Vue 是**响应式数据 + 自动追踪**。React 偏函数式、需显式优化；Vue 偏声明式、编译器帮做优化。\n\n### Q2：Vue 的 v-model 在 React 中怎么实现？\n> React 没有语法糖，需手动传 `value` + `onChange`，或用第三方库。本质是受控组件的模式。\n\n### Q3：React 的 useEffect 和 Vue 的 watch 有什么区别？\n> useEffect 是**副作用钩子**（渲染后执行），需手动声明依赖；Vue 的 watch 是**声明式监听**，依赖自动追踪。computed 更接近 useMemo。\n\n### Q4：为什么大型项目选 React 更多？\n> 生态更丰富（Next.js + TypeScript 深度整合）、函数式编程利于抽象与测试、React Native 跨端能力。但实际上两者都可以支撑大型项目。\n\n### Q5：Vue 3 相比 Vue 2 最大的改进？\n> Composition API（逻辑复用）、Proxy 响应式、更好的 TS 支持、Tree-shaking 减肥。\n\n---\n\n*整理时间：2026-06-03*\n", "17-Vue进阶": "# Vue 进阶面试笔记\n> 基础响应式原理见 `05-Vue响应式.md`\n\n---\n\n## 一、Composition API 深入\n\n### setup vs Options API\n\n```vue\n\n\n\n\n\n```\n\n### 为什么引入 Composition API？\n\n| 问题 | Options API | Composition API |\n|------|-------------|-----------------|\n| 逻辑复用 | Mixin（命名冲突/来源不清） | 自定义 Hook（composables） |\n| 代码组织 | 按选项拆分（data/methods/watch 割裂） | 按功能聚合（相关代码在一起） |\n| TS 支持 | 差 | 好 |\n\n### composables（自定义 Hook）\n\n```js\n// useMouse.js\nexport function useMouse() {\n const x = ref(0)\n const y = ref(0)\n function update(e) { x.value = e.pageX; y.value = e.pageY }\n onMounted(() => window.addEventListener('mousemove', update))\n onUnmounted(() => window.removeEventListener('mousemove', update))\n return { x, y }\n}\n\n// 使用\nconst { x, y } = useMouse()\n```\n\n---\n\n## 二、组件通信大全\n\n### 1. props / emits\n\n```vue\n\n\n\n\n\n```\n\n### 2. provide / inject\n\n```js\n// 祖先\nprovide('theme', 'dark')\n\n// 后代\nconst theme = inject('theme')\n```\n\n### 3. v-model 双向绑定\n\n```vue\n\n\n\n\n\n\n\n\n```\n\n### 4. ref + defineExpose\n\n```vue\n\n\n\n\n\n// childRef.value.reset()\n```\n\n### 5. 事件总线（不推荐）\n\n小型项目可用 `mitt` 库做简单的事件总线。\n\n---\n\n## 三、插槽（Slot）\n\n```vue\n\n Hello \n\n\n\n\n 头部 \n 默认 \n 底部 \n\n\n\n\n {{ item }} \n\n```\n\n---\n\n## 四、Vue Router\n\n```js\nconst routes = [\n {\n path: '/user/:id',\n component: () => import('@/views/User.vue'), // 懒加载\n meta: { requiresAuth: true },\n children: [/* 嵌套路由 */]\n }\n]\n\n// 导航守卫\nrouter.beforeEach((to, from) => {\n if (to.meta.requiresAuth && !token) return '/login'\n})\n```\n\n| 对比 | hash | history |\n|------|------|---------|\n| URL | `/#/page` | `/page` |\n| 原理 | hashchange 事件 | History API (pushState) |\n| 部署 | 无需服务端配置 | 需服务端支持（404 回退到 index.html） |\n\n---\n\n## 五、Pinia\n\n```js\n// 定义 Store\nexport const useUserStore = defineStore('user', () => {\n const user = ref(null)\n const isLogin = computed(() => !!user.value)\n\n async function login(credentials) {\n user.value = await api.login(credentials)\n }\n\n return { user, isLogin, login }\n})\n\n// 使用\nconst store = useUserStore()\nstore.login({ name, password })\n```\n\n### Pinia vs Vuex\n\n| 对比 | Pinia | Vuex |\n|------|-------|------|\n| 体积 | ~1KB | 较大 |\n| TS 支持 | 原生 | 需额外类型声明 |\n| Mutation | 无（直接改 state） | 有 |\n| 模块 | 多个独立 store | modules 嵌套 |\n| 官方 | Vue 3 官方推荐 | Vue 2 官方 |\n\n---\n\n## 六、KeepAlive\n\n```vue\n\n\n \n\n\n\n\n```\n\n---\n\n## 七、nextTick\n\n```js\n// 数据变更后，DOM 还没更新\ncount.value++\nconsole.log(document.getElementById('num').textContent) // 旧值\n\nawait nextTick()\n// DOM 已更新\nconsole.log(document.getElementById('num').textContent) // 新值\n```\n\n> Vue 的 DOM 更新是**异步批处理**，同一事件循环内的多次数据变更只触发一次更新。\n\n---\n\n## 八、高频面试题\n\n### Q1：Mixin 有什么问题？Composition API 如何解决？\n> Mixin：命名冲突、来源不明、隐式依赖。Composition API：显式引入、函数作用域隔离、TS 友好。\n\n### Q2：v-if 和 v-show 的区别？\n> `v-if` 控制 DOM 的**存在**（真正的条件渲染），切换开销大；`v-show` 控制 `display`（始终挂载），初始渲染开销大。频繁切换用 v-show。\n\n### Q3：v-for 为什么必须加 key？\n> key 是虚拟 DOM 的唯一标识，帮助 diff 算法高效复用/移动 DOM 节点。不用 index 作 key 因为列表顺序变化时 index 不稳定。\n\n### Q4：Vue 组件 data 为什么必须是函数？\n> 返回对象的引用会被所有实例共享。函数返回新对象，每个实例独立一份数据。\n\n### Q5：watch 和 computed 的选择？\n> computed：依赖变化时**返回**新值，有缓存，不执行副作用。watch：数据变化时**执行**操作（API 请求、DOM 操作等副作用）。\n\n---\n\n*整理时间：2026-06-03*\n"};
let currentId = null;
let sidebarOpen = false;
// 渲染侧边栏
function renderList(filter = '') {
const list = document.getElementById('note-list');
const filtered = NOTES.filter(n =>
n.title.toLowerCase().includes(filter.toLowerCase()) ||
n.id.includes(filter)
);
list.innerHTML = filtered.map(n => `
`).join('');
}
// 加载笔记内容（内嵌版，无需 fetch）
function loadNote(id) {
currentId = id;
const note = NOTES.find(n => n.id === id);
if (!note || !NOTES_CONTENT[id]) return;
document.getElementById('topbar-title').textContent = note.title;
const html = renderMarkdown(NOTES_CONTENT[id]);
document.getElementById('content').innerHTML = `
${note.title}
整理时间：${note.date}
${html}
`;
document.querySelectorAll('.sidebar-item').forEach(el => {
el.classList.toggle('active', el.getAttribute('href') === '#' + id);
});
if (window.innerWidth <= 768) toggleSidebar(false);
window.scrollTo(0, 0);
}
// 简单 Markdown 渲染器
function renderMarkdown(md) {
let html = md;
// 代码块
html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) =>
'' + escapeHtml(code.trim()) + '
'
);
// 行内代码
html = html.replace(/`([^`]+)`/g, '$1');
// 标题
html = html.replace(/^#### (.+)$/gm, '$1
');
html = html.replace(/^### (.+)$/gm, '$1
');
html = html.replace(/^## (.+)$/gm, '$1
');
html = html.replace(/^# (.+)$/gm, '$1
');
// 粗体
html = html.replace(/\*\*(.+?)\*\*/g, '$1');
// 表格
html = html.replace(/\|(.+)\|\n\|[-| :]+\|\n([\s\S]*?)(?=\n\n|\n###|\n##|\n#|$)/g, (match) => {
const lines = match.trim().split('\n');
if (lines.length < 2) return match;
const headers = lines[0].split('|').filter(c => c.trim()).map(c => `${c.trim()} | `).join('');
const rows = lines.slice(2).map(line => {
const cells = line.split('|').filter(c => c.trim()).map(c => `${c.trim()} | `).join('');
return `${cells}
`;
}).join('');
return ``;
});
// 列表
html = html.replace(/^[\s]*[-*] (.+)$/gm, '$1');
html = html.replace(/(.*<\/li>)/s, '');
// 引用
html = html.replace(/^> (.+)$/gm, '$1
');
// 分隔线
html = html.replace(/^---$/gm, '
');
// 段落
html = html.replace(/^(?!<[h|ul|ol|pre|table|blockquote|hr|div)(.+)$/gm, '$1
');
return html;
}
function escapeHtml(str) {
return str.replace(/&/g,'&').replace(//g,'>');
}
function filterNotes(val) {
renderList(val);
}
function toggleSidebar(force) {
sidebarOpen = force !== undefined ? force : !sidebarOpen;
document.getElementById('sidebar').classList.toggle('open', sidebarOpen);
document.getElementById('overlay').classList.toggle('show', sidebarOpen);
}
// 路由处理
function init() {
renderList();
const hash = location.hash.slice(1);
if (hash) {
loadNote(hash);
}
}
window.addEventListener('hashchange', () => {
const hash = location.hash.slice(1);
if (hash) loadNote(hash);
});
init();
![](\"real.jpg\")
\n\n\nconst Home = () => import('@/views/Home.vue')\n\n\n